<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .stack {
            margin: 0 auto;
            position: relative;
            z-index: 1000;
            width: 320px;
            height: 320px;
            padding: 0;
            list-style: none;
            pointer-events: none;
        }

        .stack__item {
            background: #fff;
            height: 100%;
            width: 100%;
            border-radius: 4px;
            text-align: center;
            overflow: hidden;
            position: absolute;
            opacity: 0;
            display: -webkit-flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            -khtml-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            pointer-events: auto;
        }

        .stack__item img {
            width: 100%;
            display: block;
            pointer-events: none;
        }

        .controls {
            position: relative;
            width: 200px;
            text-align: center;
            margin: 3em 0 0 0;
        }

        .button {
            border: none;
            background: none;
            position: relative;
            display: inline-block;
            padding: 0.25em;
            margin: 0 0.5em;
            cursor: pointer;
            font-size: 1.5em;
            width: 50px;
            height: 50px;
            z-index: 100;
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        .button .fa {
            pointer-events: none;
        }

        .button--default {
            background: #333;
            border-radius: 3px;
            color: #fff;
            font-size: 0.95em;
            font-weight: bold;
            padding: 0.65em 2em;
            width: auto;
            height: auto;
        }

        .button--sonar {
            border-radius: 50%;
            background: #fff;
        }

        .button--sonar::before {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            content: '';
            opacity: 0;
            pointer-events: none;
            border: 4px solid rgba(255, 255, 255, 0.5);
            margin: -35px 0 0 -35px;
            width: 70px;
            height: 70px;
        }

        .button--sonar.button--active::before {
            -webkit-animation: anim-effect-sonar 0.3s ease-out forwards;
            animation: anim-effect-sonar 0.3s ease-out forwards;
        }

        @-webkit-keyframes anim-effect-sonar {
            0% {
                opacity: 1;
                -webkit-transform: scale3d(0.9, 0.9, 1);
                transform: scale3d(0.9, 0.9, 1);
            }
            to {
                opacity: 0;
                -webkit-transform: scale3d(1.4, 1.4, 1);
                transform: scale3d(1.4, 1.4, 1);
            }
        }

        @keyframes anim-effect-sonar {
            0% {
                opacity: 1;
                -webkit-transform: scale3d(0.9, 0.9, 1);
                transform: scale3d(0.9, 0.9, 1);
            }
            to {
                opacity: 0;
                -webkit-transform: scale3d(1.4, 1.4, 1);
                transform: scale3d(1.4, 1.4, 1);
            }
        }

        .material-circle {
            width: 150vh;
            height: 150vh;
            margin: -75vh 0 0 -75vh;
            z-index: 0;
            border-radius: 50%;
            pointer-events: none;
            opacity: 0;
            position: absolute;
            z-index: 0;
            -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
        }

        .material-circle--accept.material-circle--active {
            background: #81d47d;
        }

        .material-circle--reject.material-circle--active {
            background: #e66868;
        }

        .material-circle--active {
            -webkit-animation: anim-effect-material 0.6s ease-out forwards;
            animation: anim-effect-material 0.6s ease-out forwards;
        }

        @-webkit-keyframes anim-effect-material {
            0% {
                opacity: 1;
                -webkit-transform: scale3d(0, 0, 1);
                transform: scale3d(0, 0, 1);
            }
            70% {
                opacity: 1;
                -webkit-transform: scale3d(1.4, 1.4, 1);
                transform: scale3d(1.4, 1.4, 1);
            }
            100% {
                opacity: 0;
                -webkit-transform: scale3d(1.4, 1.4, 1);
                transform: scale3d(1.4, 1.4, 1);
            }
        }

        @keyframes anim-effect-material {
            0% {
                opacity: 1;
                -webkit-transform: scale3d(0, 0, 1);
                transform: scale3d(0, 0, 1);
            }
            70% {
                opacity: 1;
                -webkit-transform: scale3d(1.4, 1.4, 1);
                transform: scale3d(1.4, 1.4, 1);
            }
            100% {
                opacity: 0;
                -webkit-transform: scale3d(1.4, 1.4, 1);
                transform: scale3d(1.4, 1.4, 1);
            }
        }

        .button:focus {
            outline: none;
        }

        .button--accept {
            color: #81d47d;
        }

        .button--reject {
            color: #e66868;
        }

        .text-hidden {
            position: absolute;
            overflow: hidden;
            width: 0;
            height: 0;
            color: transparent;
            display: block;
        }

        /* Animations */

        .stack__item--reject,
        .stack__item--accept {
            pointer-events: none;
        }


        /***********************************************/

        /******************** iman *********************/

        /***********************************************/

        .stack--iman .stack__item--reject {
            -webkit-animation: imanReject 0.5s forwards;
            animation: imanReject 0.5s forwards;
        }

        @-webkit-keyframes imanReject {
            to {
                -webkit-transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
                transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
            }
        }

        @keyframes imanReject {
            to {
                -webkit-transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
                transform: translate3d(-25vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
            }
        }

        .stack--iman .stack__item--accept {
            -webkit-animation: imanAccept 0.5s forwards;
            animation: imanAccept 0.5s forwards;
        }

        @-webkit-keyframes imanAccept {
            to {
                -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
                transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
            }
        }

        @keyframes imanAccept {
            to {
                -webkit-transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
                transform: translate3d(25vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
            }
        }

        /* ...when content has 100% viewport width */

        @media screen and (max-width: 60em) {

            @-webkit-keyframes imanReject {
                to {
                    -webkit-transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
                    transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
                }
            }

            @keyframes imanReject {
                to {
                    -webkit-transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
                    transform: translate3d(-50vw, 0, 0) translate3d(-60%, 0, 0) rotate3d(0, 0, 1, -5deg);
                }
            }

            @-webkit-keyframes imanAccept {
                to {
                    -webkit-transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
                    transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
                }
            }

            @keyframes imanAccept {
                to {
                    -webkit-transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
                    transform: translate3d(50vw, 0, 0) translate3d(60%, 0, 0) rotate3d(0, 0, 1, 5deg);
                }
            }

        }
    </style>
</head>

<body>

    <div class="content color-6">
        <h2 class="content__title">Iman</h2>
        <ul id="stack_iman" class="stack stack--iman">
            <li class="stack__item">
                <img src="img/6.png" alt="Tree 6" />
            </li>
            <li class="stack__item">
                <img src="img/1.png" alt="Tree 1" />
            </li>
            <li class="stack__item">
                <img src="img/2.png" alt="Tree 2" />
            </li>
            <li class="stack__item">
                <img src="img/3.png" alt="Tree 3" />
            </li>
            <li class="stack__item">
                <img src="img/4.png" alt="Tree 4" />
            </li>
            <li class="stack__item">
                <img src="img/5.png" alt="Tree 5" />
            </li>
        </ul>
        <div class="controls">
            <button class="button button--sonar button--reject" data-stack="stack_iman">
                <i class="fa fa-times"></i>
                <span class="text-hidden">Reject</span>
            </button>
            <button class="button button--sonar button--accept" data-stack="stack_iman">
                <i class="fa fa-check"></i>
                <span class="text-hidden">Accept</span>
            </button>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>

</html>